<template>
  <div>
    <el-upload class="avatar-uploader" :on-change="befoUp" :auto-upload="false">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>
<script setup>
import api from "../api/index";
import { Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
const imageUrl = ref("");
const handleAvatarSuccess = (val) => {
  imageUrl.value = "http://8.141.145.150:3000" + val.data.url;
};
const befoUp = (val) => {
  let upFile = new FormData();
  upFile.append("img", val.raw);
  api.post("http://8.141.145.150:3000/upload/upimgs", upFile).then((res) => {
    console.log(res);
  });
};
</script>
<style lang="scss">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
